<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{width: 100px;height: 100px;background: red;position: absolute;left:0;top:0;}
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
<script>
    function Drag(ele){
        this.ele = ele;
        // bind每次执行得到的都是 新 函数
        // 监听式绑定和删除事件的事件处理函数，必须是 同一 个
        // 为了保证，绑定和删除时，是同一个，那么需要提前使用bind进行this的处理
        this.m = this.move.bind(this);
        this.u = this.up.bind(this);

        this.addEvent();
    }
    Drag.prototype.addEvent = function(){
        this.ele.addEventListener("mousedown",this.down.bind(this))
    }
    Drag.prototype.down = function(downEve){
        this.downEve = downEve
        document.addEventListener("mousemove",this.m)
        document.addEventListener("mouseup",this.u)
    }
    Drag.prototype.move = function(moveEve){
        this.ele.style.left = moveEve.pageX - this.downEve.offsetX + "px"
        this.ele.style.top = moveEve.pageY - this.downEve.offsetY + "px"
    }
    Drag.prototype.up = function(){
        document.removeEventListener("mousemove",this.m)
        document.removeEventListener("mouseup",this.u)
    }
    
    var obox1 = document.querySelector(".box1");

    new Drag(obox1);
    
</script>
</html>